import { Box, Divider, List, Text, VerticalStack } from '@shopify/polaris'
import React from 'react'
import ReportRecommendations from './ReportRecommendations'
import { mapLabel, getDashboardCategory } from "../../../../main/labelHelper"

const nextStepItems = [
    {
        title: "Prioritized Remediation",
        content: ["Address identified high-risk vulnerabilities first", "Implement suggested security controls", "Conduct follow-up testing to verify fixes"]
    },
    {
        title: "Ongoing Security Measures",
        content: ["Enable continuous API security monitoring", `Integrate ${mapLabel('security testing', getDashboardCategory())} into your CI/CD pipeline`, "Track and monitor sensitive data exposure", "Maintain an up-to-date API inventory"]
    }
]

const ReportConclusion = ({ aktoRecommendations }) => {
    return (
        <>
            <Box id="akto-next-step" paddingBlockStart={6} paddingBlockEnd={6} paddingInlineStart={5} paddingInlineEnd={5}>
                <VerticalStack gap="4">
                    <Text variant="headingLg">3. Conclusion and Next Steps</Text>
                    <VerticalStack gap="3">
                        <Text variant="bodyMd" color='subdued'>
                            {"This security assessment was conducted using Akto's continuous API " + mapLabel('security testing', getDashboardCategory()) + " platform, which helped identify various vulnerabilities across your API endpoints. To maintain robust API security moving forward, we recommend:"}
                        </Text>
                        <VerticalStack>
                            {nextStepItems.map((item, index) => {
                                return (
                                    <Box key={index}>
                                        <Text color='subdued'>{index + 1}. {item.title}</Text>
                                        <Box paddingInlineStart={4}>
                                            {
                                                item.content.map((item, index) => {
                                                    return (
                                                        <List.Item key={item+index}><span className='subdued-color-text'>{item}</span></List.Item>
                                                    )
                                                })
                                            }
                                        </Box>
                                    </Box>
                                )
                            })}
                        </VerticalStack>
                        <Text color='subdued'>
                            Our platform will continue to monitor your APIs for potential security risks and notify your team of any new vulnerabilities through your configured Jira/Slack integrations. Regular automated scans will help ensure sustained security coverage across your API landscape.
                        </Text>
                    </VerticalStack>
                </VerticalStack>
            </Box>

            {aktoRecommendations.length !== 0 ?
                <Box>
                    <div className="report-page-break"></div>
                    <Box paddingInlineStart={5} paddingInlineEnd={5}>
                        <Divider />
                    </Box>
                    <ReportRecommendations
                        title="Akto recommendations"
                        sno="4"
                        itemsList={aktoRecommendations}
                    />
                </Box>: null
            }
        </>
    )
}

export default ReportConclusion